<template>
  <div>
    <!-- <button  >nihao</button> -->
    <!-- v-model="formValidate.province" -->
    <el-select
      :class="selectBg"
      placeholder="Please select country"
      filterable
      v-model="formData"
    >
      <el-option-group
        :class="groupBg"
        v-for="group in country"
        :key="group.label"
        :label="group.label"
      >
        <el-option
          :disabled="item.disabled"
          v-for="item in group.options"
          :key="item.label"
          :label="item.lable"
          :value="item.value"
          type="button"
        ></el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<script>
export default {
  lable: "foreignArea",
  props: {
    // title: {
    //   Type: String,
    //   default: ""
    // },
    selectBg: {
      Type: String,
      default: "",
    },
    groupBg: {
      Type: String,
      default: "",
    },
    popularCity: {
      Type: Object,
      default: null,
    },
  },
  data() {
    return {
      formData: "CN",
      country: [
        {
          label: "所有国家",
          options:[],
        },
      ],
    };
  },
  watch: {
    formData() {
      this.$emit("selectcountry", this.formData);
    },
  },
  created() {
    this.$axios.queryNationalityList({nationalityName:""}).then((res)=>{
      this.$nextTick(()=>{
        if(res.code !== "00000") return;
        let arr = res.data
        arr =[].concat(arr.map((item)=>{
          return {
            value: item.nationalityCode,
            lable: item.nationalityName,
            en: item.nationalityEnName,
            tel: item.nationalityTel,
            pinyin: item.nationalityPy
          }
        }))
        this.$set(this.country[0],"options",arr)
      })
    });
  },
};
</script>

<style scoped>
.groupBlue {
  background-color: #00355d;

  width: 170px;
}
.selectBlue .el-input .el-input__inner {
  background-color: #00355d;
  border: none;
  width: 170px;
}
.groupBlack {
  width: 170px;
}
.selectBlack .el-input .el-input__inner {
  border: none;
  width: 170px;
}
.groupWhite {
  background-color: #d9d9d9;
  width: 170px;
}
.selectWhite .el-input .el-input__inner {
  border: none;
  background-color: #d9d9d9;
  width: 170px;
}
</style>
